<template>
  <div class="w-full grid grid-rows-[50px_1fr]">
    <!-- 按钮组 -->
    <div class="w-full flex justify-end items-center border-b-2 border-b-gray-400 pr-5">
      <el-button-group>
        <el-button type="info">
          <Arithmetic theme="outline" size="16" fill="#fff" class="" />
        </el-button>

        <!-- 受力表格 -->
        <el-button type="info" @click="tablePowerVisible = true">
          <TableFile theme="outline" size="16" fill="#fff" />
        </el-button>

        <!-- 设置按钮 -->
        <el-button type="info" @click="configDrawerVisible = true">
          <SettingTwo theme="outline" size="16" fill="#fff" class="" />
        </el-button>
      </el-button-group>
    </div>

    <div ref="container" class="relative w-full">
      <TowerCanvas :width="width" :height="height" :startY="startY" :margin="margin" :lstTowerConfig="lstTowerConfig" />
      <GridCanvas :width="width" :height="height" :endX="endX" :endY="endY" :startY="startY" :margin="margin" />
      <AcrossCanvas
        :width="width"
        :height="height"
        :startY="startY"
        :margin="margin"
        :lstAcrossConfig="lstAcrossConfig" />
      <SpanCanvas :width="width" :height="height" :startY="startY" :margin="margin" :lstSpan="lstSpan" />
      <CurveCanvas :width="width" :height="height" :startY="startY" :margin="margin" :lstCurveConfig="lstCurveConfig" />
    </div>
  </div>

  <CalcConfig :visiable="calcConfigVisible" :zoneId="+$route.params.id" @closed="calcConfigVisible = false" />
  <ConfigDrawer :visible="configDrawerVisible" :zoneId="+$route.params.id" @closed="configDrawerVisible = false" />
  <TabelPowerDialog :visible="tablePowerVisible" @closed="tablePowerVisible = false" />
</template>

<script setup lang="ts">
import AcrossCanvas from '@/components/canvas/AcrossCanvas.vue'
import GridCanvas from '@/components/canvas/gridCanvas.vue'
import SpanCanvas from '@/components/canvas/spanCanvas.vue'
import TowerCanvas from '@/components/canvas/towerCanvas.vue'
import CalcConfig from '@/components/dialog/CalcConfig.vue'
import ConfigDrawer from '@/components/drawer/ConfigDrawer/index.vue'
import TabelPowerDialog from '@/components/dialog/TablePower.vue'
import useAcross from '@/composables/useAcross'
import useBet from '@/composables/useBet'
import useCalculate from '@/composables/useCalculate'
import useTower from '@/composables/useTower'
import useZone from '@/composables/useZone'
import { Arithmetic, SettingTwo, TableFile } from '@icon-park/vue-next'
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import CurveCanvas from '@/components/canvas/curveCanvas.vue'
import useCalculatePower from '@/composables/useCalculatePower'

const container = ref<HTMLDivElement>()
const calcConfigVisible = ref(false)
const configDrawerVisible = ref(false)
const tablePowerVisible = ref(false)

const route = useRoute()
const channel = new BroadcastChannel('myChannel')
const { calculateZoneConfig } = useZone()
const { all: allTower, towers } = useTower()
const { all: allBet, bets } = useBet()
const { all: allAcross, acrosss } = useAcross()
const { calc } = useCalculate()

const lstTowerConfig = ref<TowerConfig[]>([])
const lstAcrossConfig = ref<AcrossConfig[]>([])
const lstSpan = ref<SpanCanvasConfig[]>([])
const lstCurveConfig = ref<CurveConfig[]>([])

const width = ref<number>(100)
const height = ref<number>(100)
const startY = ref<number>(100)
const endX = ref<number>(1000)
const endY = ref<number>(1000)
const margin = ref<number>(40)

const { power } = useCalculatePower()

channel.onmessage = async function (e) {
  await allTower({ zoneId: e.data })
  await allBet({ zoneId: e.data })
  await allAcross({ zoneId: e.data })
  await drawInt()
}

function closeTab() {
  localStorage.removeItem('IsImgTab')
  window.close()
}

window.onbeforeunload = function () {
  localStorage.removeItem('IsImgTab')
}

async function init() {
  await calc({ zoneId: +route.params.id })
  await allTower({ zoneId: +route.params.id })
  await allBet({ zoneId: +route.params.id })
  await allAcross({ zoneId: +route.params.id })
  await drawInt()
}

async function drawInt() {
  const { offsetWidth, offsetHeight } = container.value!
  const {
    width: w,
    height: h,
    startY: y,
    endX: ex,
    endY: ey,
  } = await calculateZoneConfig(+route.params.id, margin.value, offsetWidth, offsetHeight)

  width.value = w
  height.value = h
  startY.value = y
  endX.value = ex
  endY.value = ey

  lstTowerConfig.value = towers.value!.map((tower) => ({
    tName: tower.tName,
    tStyle: tower.tStyle,
    altitude: tower.altitude,
    isNaiz: tower.tStyle === '耐张',
    tType: tower.tType,
    x: tower.pointTower.calcX,
    y: tower.pointTower.calcY,
  }))

  lstSpan.value = bets.value!.map((bet) => ({
    span: bet.btSpan,
  }))

  lstAcrossConfig.value = acrosss.value!.map((across) => ({
    acrossName: across.acrossName,
    acrossY: across.acrossY,
    x: across.PointAcross.calcX,
    y: across.PointAcross.calcY,
  }))

  // 未完成
  // lstCurveConfig.value = power.value!.powerTowers()
}
init()
</script>

<style></style>
